<template>
	<view class="reserveProcess">
		<view class="reserveProcessItem">
			<text>1.点击小程序首页预约挂号</text>
			<text>选择要挂号的科室，可在顶部切换院区。</text>
			<view></view>
		</view>
		<view class="reserveProcessItem">
			<text>2.选择要挂号的医生及挂号的时间段</text>
			<view></view>
		</view>
		<view class="reserveProcessItem">
			<text>3.确认预约信息，点击确认挂号完成。</text>
		</view>
	</view>
</template>

<script setup>
	import {
		appGuideQueryById
	} from '@/api/TopUpService.js'
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const Data = reactive({
		list: []
	})
	const appGuideQueryApi = (id) => {
		appGuideQueryById(id).then(({
			data
		}) => {
			console.log(data)
		}).catch(err => {
			console.log(err)
		})
	}
	onLoad((options) => {
		options.id && (appGuideQueryApi(options.id))
		console.log(options.id)
	})
</script>

<style lang="less" scoped>
	.reserveProcess {
		width: 750rpx;
		height: 100vh;
		background-color: #fdfeff;

		.reserveProcessItem {
			width: 680rpx;
			margin: 20rpx auto;
			display: flex;
			flex-direction: column;

			text {
				color: #626262;
				font-size: 28rpx;
				margin: 20rpx 0;

				&:first-child {
					color: #3d3d3d;
					font-weight: 600;
					font-size: 32rpx;
				}
			}

			view {
				width: 100%;
				height: 375rpx;
				border-radius: 20rpx;
				background-color: #e4f0ff;
			}
		}
	}
</style>
